<template>
  <div class="dfc c">
    <div class="statistics">
      <div class="dfc">
        <v-preview title="我的业务" :list="previews" class="bd-1 bdr-10 pd-10"/>
        <v-invite class="pd-10 bdr-10 bd-1 mt-10"/>
        <v-charts title="利润统计" class="pd-10 bdr-10 bd-1 fx-1 mt-10" v-model="chartDate" @refresh="getChart"
                  ref="charts"/>
      </div>
      <div class="dfc">
        <v-channel-commissioner-wallet class="pd-10 bdr-10 bd-1" :wallet="wallet"/>
        <v-bi class="pd-10 bdr-10 bd-1 bi mt-10" :list="biList"/>
        <v-order :tableData="tableData" repeat="true" rightBtn="查看排行榜" class="pd-10 bdr-10 bd-1 fx-1" style="margin-top: 10px;"/>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import vPreview from '@/components/home-components/preview'
  import vBi from '@/components/home-components/bi'
  import vOrder from '@/components/home-components/order'
  import vCharts from '@/components/home-components/charts'
  import vPlainTable from '@/components/plain-table'
  import vInvite from '@/components/home-components/invite'
  import vChannelCommissionerWallet from '@/components/home-components/channel-commissioner-wallet'
  import { Getter } from 'vuex-class'

  @Component({
    components: {
      vPreview, vBi, vCharts, vPlainTable, vOrder, vInvite, vChannelCommissionerWallet
    }
  })
  export default class Boss extends Vue {
    @Getter userInfo

    previews = [
      {
        title: '新增企业',
        value: ''
      },
      {
        title: '渠道商',
        value: ''
      },
      {
        title: '企业会员',
        value: ''
      }
    ]
    wallet = {}
    chartDate = 30
    biList = [
      {
        title: '本日订单量（笔）',
        value: ''
      },
      {
        title: '本日交易额（元）',
        value: ''
      },
      {
        title: '本月订单量（笔）',
        value: ''
      },
      {
        title: '本月交易额（元）',
        value: ''
      }
    ]
    tableData: TableData[] = [
      {
        header: [
          {
            key: 'channel_name',
            label: '渠道商名称'
          },
          {
            key: 'turn_over',
            label: '交易额'
          }
        ],
        body: [
          {
            channel_name: '呢咋',
            turn_over: 5
          },
          {
            channel_name: '呢咋',
            turn_over: 5
          }
        ],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '渠道商交易额排行榜',
          path: 'rank-channel/1'
        }
      },
      {
        header: [
          {
            key: 'enterprise_id',
            label: '企业id'
          },
          {
            key: 'enterprise_name',
            label: '企业名称'
          },
          {
            key: 'bill_sum',
            label: '票据数量'
          },
          {
            key: 'turnover',
            label: '交易额'
          }
        ],
        body: [
          {
            enterprise_id: '呢咋',
            enterprise_name: 5,
            bill_sum: 12,
            turnover: 22222
          },
          {
            enterprise_id: '呢咋',
            enterprise_name: 5,
            bill_sum: 12,
            turnover: 22222
          }
        ],
        footer: {
          total: 999,
          currentPage: 1
        },
        expand: {
          title: '企业交易额排行榜',
          path: 'rank-channel/2'
        }
      }
    ]

    makeChart (data) {
      let dates = data.myCommisionList.map(v => Object.keys(v)[0])
      return {
        columns: ['日期', '我的利润', '渠道商佣金', '爱仕达多'],
        rows: dates.map(v => ({
          '日期': v,
          '我的利润': data.myCommisionList[v],
          '渠道商佣金': data.channelDealerList[v],
          '渠道专员佣金': data.channelCommisionList[v]
        }))
      }
    }

    async getChart () {
      let res: AjaxResponse = await this.$axios.post('b/boms/commision/statistics/list', {
        day: this.chartDate
      })
      this.$refs.charts.init(this.makeChart(res.data))
    }

    async getWallet () {
      let res: AjaxResponse = await this.$axios.post('b/boms/commision/statistics/info', {})
      this.wallet = res.data
    }

    async getBi () {
      let res: AjaxResponse = await this.$axios.get(`b/boms/operator/channelSpec/${this.userInfo.userId}`)
      this.biList[0].value = res.data.dayOrderSum
      this.biList[1].value = res.data.dayTurnover
      this.biList[2].value = res.data.monthOrderSum
      this.biList[3].value = res.data.monthTurnover
      this.previews[0].value = res.data.newEnterprsie
      this.previews[1].value = res.data.channel
      this.previews[2].value = res.data.enterprise
    }

    async getRank () {
      let res: AjaxResponse = await this.$axios.post('b/boms/rank/getForChannelSpec', {
        userId: this.userInfo.userId,
        type: 0,
        isHome: 1,
        currentPage: 1,
        pageSize: 2
      })
      if (res.responseCode === 200) {
        this.tableData[0].body = res.data.channel_rank.items
        this.tableData[1].body = res.data.ent_rank.items
      }
    }

    mounted () {
      // this.getChart()
      this.getBi()
      this.getWallet()
      this.getRank()
    }
  }
</script>
<style lang="less" scoped>
  .c {
    min-height: 900px;
    overflow-y: scroll;
  }

  .wallet {
    margin-top: 10px;
  }

  .statistics {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    > div {
      width: 49.5%;
    }
  }

  .bi {
    // height: 234px;
  }

  .invite {
    line-height: 60px;
    span {
      display: inline-block;
      width: 200px;
    }
  }

</style>
